<template>
<!-- 内容区 -->
<div class="project-content-box">
  <div class="top-text">{{breadTitle}}</div>
  <div class="project-content" element-loading-text="拼命加载中" v-loading="loading">
    <!-- 顶部操作 -->
    <div class="page-top-content">
      <div class="left-search-box">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="search-item">
              <label for="" style="min-width: 42px;">类型名称</label>
              <el-select v-model="typeCode" placeholder="请选择">
                <el-option v-for="(item,index) in inTypeOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="search-item">
              <label for="" style="min-width: 42px;">资源组名称</label>
              <el-select v-model="resourceGroupId" placeholder="请选择">
                <el-option v-for="(item,index) in proTypeOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="search-item">
              <label for="" style="min-width: 42px;">创建时间</label>
              <el-date-picker type="datetime" placeholder="选择日期" v-model="beginTime" style="width: 100%;"></el-date-picker>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="right-search-box" style="flex: 0 0 300px;">
        <el-button type="primary" icon="el-icon-plus" class="fr" @click="clickAdd()">新增</el-button>
        <el-button type="primary" icon="el-icon-search" class="fr" @click="getTableData()">搜索</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <tablelist :tableData="tableOptionData" :pageOptions="page" @watchTable="tableClick" />
  </div>

  <modal :modalData="modalData" :dialogVisible="dialogVisible" @watchModal="clickMoadl">

    <template slot="main" slot-scope="props">

      <el-form :model="props.data" :rules="props.data.rules"  ref="processingUnitForm" >
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="类型" label-width="100px" prop="processorType">
              <el-select v-model="props.data.processorType" placeholder="请选择">
                <el-option v-for="(item,index) in proTypeOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="IP地址" label-width="100px" prop="processorIp">
              <el-input v-model="props.data.processorIp" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="端口" label-width="100px" prop="processorPort">
              <el-input-number v-model="props.data.processorPort" :min="1" :precision="0" label="端口"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="断点号" label-width="100px">
              <el-input-number v-model="props.data.endPoint" :min="1" :precision="0" label="断点号"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="可用路数" label-width="100px" prop="usableNum">
              <el-input-number v-model="props.data.usableNum" :min="1" :precision="0" label="可用路数"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接入类型" label-width="100px" prop="intfType">
              <el-select v-model="props.data.intfType" placeholder="请选择">
                <el-option v-for="(item,index) in proTypeOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="资源组" label-width="100px" prop="groupId">
              <el-select v-model="props.data.groupId" placeholder="请选择">
                <el-option v-for="(item,index) in resourceOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="描述" label-width="100px" prop="remark">
              <el-input v-model="props.data.remark"  type="textarea" :rows="4" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </template>
  </modal>
</div>
</template>
<script>
import local from '@/AppConfig'
import tablelist from '@/components/table'
import modal from '@/components/modal'
// import { resourceGroupList } from '@/api/resourceGroup'
// import { queryTypeMap } from '@/api/public'
// import { processorList, deleteProcessor, saveProcessor, changeProcessors } from '@/api/processingUnit'
import { validateIp } from "@/utils/validateRules.js";
export default {
  data() {
    return {
      loading: false,
      typeCode: "",
      resourceGroupId: "",
      beginTime: "",
      isEdit:false,
      isAdd:true,
      inTypeOptions:[],
      proTypeOptions:[],
      resourceOptions:[],
      page: {
        pageNum: 1,
        pageSize: 10,
        total:0,
        currentPage:1
      },
      breadTitle: "",
      dialogVisible: false,
      value: '',
      modalData: {
        title: "新增",
        content: {
          id: '',
          // createTime: '',//创建时间
          endPoint: '',//断点号
          groupId: '',//资源组id
          intfType: '',//接入类型
          processorIp: '',//处理单元ip
          processorPort: '',//处理单元端口
          processorType: '',//处理单元类型
          remark: '',//备注
          usableNum: '',//可用路数
          rules: {
		        groupId: [{ required: true, message: "请选择资源组", trigger: "blur" }],
		        intfType: [{ required: true, message: "请选择接入类型", trigger: "blur" }],
		        processorIp: [
              { required: true, message: "请输入处理单元IP", trigger: "blur" },
              { validator: validateIp, trigger: "blur"}
            ],
		        processorPort: [{ required: true, message: "请输入处理单元端口", trigger: "blur" }],
		        processorType: [{ required: true, message: "请选择处理单元类型", trigger: "blur" }],
		        remark: [{ required: true, message: "请输入处理单元描述", trigger: "blur" }],
		        usableNum: [{ required: true, message: "请输入可用路数", trigger: "blur" }],
		      },
        },
        footerText: [{
            text: "取消",
            type: "A",
            btnType: ""
          },
          {
            text: "保存",
            type: "B",
            btnType: "primary"
          }
        ]
      },
      tableOptionData: {
        columnsData: [
          {
            name: "编号",
            width: "50",
            propValue: "id",
          },
          {
            name: "类型编码",
            width: "100",
            propValue: "processorType",
          },
          {
            name: "类型名称",
            width: "100",
            propValue: "processorTypeName",
          },
          {
            name: "ip地址",
            width: "150",
            propValue: "processorIp",
          },
          {
            name: "端口",
            width: "80",
            propValue: "processorPort",
          },
          {
            name: "断点号",
            width: "80",
            propValue: "endPoint",
          },
          {
            name: "接入类型名称",
            width: "150",
            propValue: "intfTypeName",
          },
          {
            name: "可用路数",
            width: "100",
            propValue: "usableNum",
          },
          {
            name: "资源组编号",
            width: "140",
            sortable:true,
            propValue: "groupId",
          },
          {
            name: "资源组名称",
            width: "140",
            propValue: "groupName",
          },
          {
            name: "描述",
            width: "150",
            propValue: "remark",
          },
          {
            name: "创建时间",
            width: "150",
            sortable:true,
            propValue: "createTime",
          },
          {
            name: "修改时间",
            width: "150",
            propValue: "updateTime",
          }
        ],
        tableData: [],
        isOperation: true,
        operationWidth:"200"
      }
    }
  },
  components: {
    'tablelist': tablelist,
    'modal': modal
  },
  created() {
    // this.getTypeData();
    // this.getResourceList();
    this.getTableData();
  },
  mounted() {
    this.breadTitle = this.getBreadTitleState
  },
  computed: {
    getBreadTitleState() {
      return this.$store.getters.getBreadTitle;
    }
  },
  watch: {
    getBreadTitleState: function(val) {
      this.breadTitle = val
    }
  },
  methods: {
    // 获取列表
    getTableData() {
      this.loading= true
      let params={
        "pageNum": this.page.pageNum,
        "pageSize": this.page.pageSize
      }
      this.$http.get('/json/home.json', {}).then(res => {
      // processorList(params).then((res) => {
        console.log(res.data);
        this.loading= false
        if (res.data&&res.data.code==1) {
          // 设置数据
          let tableData = []
          const resultData=res.data.data
          const { list, total }=res.data.data
          list.map((item, index, arr) => {
            tableData.push({
              id: item.id,
              delFlag:item.delFlag,
              endPoint:item.endPoint,
              groupId:item.groupId,
              intfType:item.intfType,
              processorIp:item.processorIp,
              processorPort:item.processorPort,
              processorType:item.processorType,
              processorTypeName:item.processorTypeName,
              intfTypeName:item.intfTypeName,
              groupName:item.groupName,
              createTime:item.createTime?this.$moment(item.createTime).format('YYYY-MM-DD HH:mm:ss'):'',
              updateTime:item.createTime?this.$moment(item.updateTime).format('YYYY-MM-DD HH:mm:ss'):'',
              usableNum:item.usableNum,
              remark:item.remark,
              operationArr: [
                {
                  text: "编辑",
                  type: "A"
                },
                {
                  text: "删除",
                  type: "B"
                }
              ]
            })
          });
          // 更新表格数据
          this.tableOptionData={
            columnsData:this.tableOptionData.columnsData,
            tableData:tableData,
            isOperation:true,
            operationWidth:this.tableOptionData.operationWidth
          }

          // 设置后端分页
          this.page={
            pageNum:this.page.pageNum,
            pageSize:this.page.pageSize,
            currentPage:this.page.currentPage,
            total:total
          }
        }
      }).catch(error=>{
        this.loading= false
      })
    },
    // 保存
    handleSave() {
      let itemContent = this.modalData.content
      let params = {
        endPoint: itemContent.endPoint,
        groupId: itemContent.groupId,
        intfType: itemContent.intfType,
        processorIp: itemContent.processorIp,
        processorPort: itemContent.processorPort,
        processorType: itemContent.processorType,
        remark: itemContent.remark,
        usableNum: itemContent.usableNum
      }

      if(this.isEdit){
        params.id=itemContent.id
      }
      // 保存请求
      saveProcessor(params).then((res) => {
        if (res.data&&res.data.code == 1) {
          this.$message.success('保存成功')
          this.getTableData()
          this.dialogVisible = false
        }
      })
    },
    // 编辑查看，初始化模态框数据
    inidata(row) {
      this.modalData.content.id = row.id
      this.modalData.content.endPoint = row.endPoint
      this.modalData.content.groupId = row.groupId
      this.modalData.content.intfType = row.intfType
      this.modalData.content.processorIp = row.processorIp
      this.modalData.content.processorPort = row.processorPort
      this.modalData.content.processorType = row.processorType
      this.modalData.content.usableNum = row.usableNum
      this.modalData.content.remark = row.remark
    },
    // 删除
    handleDel (row) {
      this.$confirm('确认删除?', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          confirmButtonClass: 'el-button--success'
        }).then(_ => {
        deleteProcessor(row.id).then((res) => {
          if (res.data&&res.data.code === 1) {
            this.$message.success('删除成功')
            this.page.pageNum=1
            this.getTableData()
          }
        })
      }).catch(_ => {});
    },
    // 表格点击
    tableClick(row, btn) {
      this.isAdd = false
      this.modalData.footerText=[{
          text: "取消",
          type: "A",
          btnType: ""
        },
        {
          text: "保存",
          type: "B",
          btnType: "primary"
        }
      ]
      switch (btn.type) {
        case "currentPage":
          this.page.pageNum=row
          this.getTableData();
          break;
        case "pageSize":
          this.page.pageNum=1
          this.page.pageSize=row
          this.getTableData();
          break;
        case "A":
          this.dialogVisible = true
          this.isEdit = true
          this.modalData.title = "编辑"
          this.inidata(row)
          break;
        case "B":
          this.isEdit = false
          this.handleDel(row)
          break;
        default:
          this.dialogVisible = false
          this.isEdit = false
          break;
      }
    },
    // 新增
    clickAdd() {
      this.dialogVisible = true
      this.isEdit = false
      this.isAdd = true
      this.modalData.title = "新增"

      // 清空模态框数据
      this.modalData.content.endPoint=''
      this.modalData.content.groupId=''
      this.modalData.content.intfType=''
      this.modalData.content.processorIp=''
      this.modalData.content.processorPort=''
      this.modalData.content.processorType=''
      this.modalData.content.remark=''
      this.modalData.content.usableNum=''
      this.modalData.content.id=''

      this.modalData.footerText=[{
          text: "取消",
          type: "A",
          btnType: ""
        },
        {
          text: "保存",
          type: "B",
          btnType: "primary"
        }
      ]
    },
    // 模态框点击
    clickMoadl(v) {
      if (v.type === 'B') {
        let that=this
        this.$refs["processingUnitForm"].validate(async (valid) => {
          if(valid) {
            that.handleSave()
          }
        })
      } else {
        this.$refs["processingUnitForm"].clearValidate();
        this.dialogVisible = false
      }
    },
  },
}
</script>
<style lang="less" scoped>
</style>
